<template>
  <div class="container">
    <!-- 操作 -->
    <div class="card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="接口业务编码">
          <el-input placeholder="请输入接口业务编码"></el-input>
        </el-form-item>
        <el-form-item label="接口名称">
          <el-input placeholder="请输入接口名称"></el-input>
        </el-form-item>
        <el-form-item label="接口地址">
          <el-input placeholder="请输入接口地址"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="padding-left:18px">到</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->

    <div class="card">
      <el-form>
        <el-form-item>
          <el-button type="success" @click="dialogFormVisible=true">新增</el-button>
          <el-button type="danger" @click="onSubmit">删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="接口编码">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="接口名称"></el-table-column>
        <el-table-column prop="address" label="接口地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="操作" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增接口" width="58%" :visible.sync="dialogFormVisible">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="接口业务编码">
          <el-input placeholder="请输入接口业务编码"></el-input>
        </el-form-item>
        <el-form-item label="接口名称">
          <el-input placeholder="请输入接口名称"></el-input>
        </el-form-item>
        <el-form-item label="接口地址">
          <el-input placeholder="请输入接口地址"></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            入参
            <el-form
              :model="dynamicValidateForm"
              ref="dynamicValidateForm"
              label-width="100px"
              class="demo-dynamic"
            >
              <el-form-item
                prop="email"
                label="参数编码" >
                <el-input v-model="dynamicValidateForm.email"></el-input>
              </el-form-item>
               <el-form-item
                prop="email"
                label="参数名称" >
                <el-input v-model="dynamicValidateForm.email"></el-input>
              </el-form-item>
              <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :label='参数编码'
                :key="domain.key"
                :prop="'domains.' + index + '.value'">
                <el-input v-model="domain.value"></el-input>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="addDomain">新增域名</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            出参
            <el-form
              :model="dynamicValidateForm"
              ref="dynamicValidateForm"
              label-width="100px"
              class="demo-dynamic">
              <el-form-item
                prop="email"
                label="参数编码" >
                <el-input v-model="dynamicValidateForm.email"></el-input>
              </el-form-item>
                <el-form-item
                prop="email"
                label="参数名称" >
                <el-input v-model="dynamicValidateForm.email"></el-input>
              </el-form-item>
              <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :label="'域名' + index"
                :key="domain.key"
                :prop="'domains.' + index + '.value'">
                <el-input v-model="domain.value"></el-input>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="addDomain">新增域名</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formInline: {},
      tableData: [],
      dynamicValidateForm: {
        domains: [],
      }
    };
  },
  methods: {
    onSubmit() {
      // 提交表单逻辑
    },
    handleSelectionChange(val) {
      // 处理选择变化逻辑
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
        label:"参数编码"
      },{value:"",key: Date.now(), label:"参数名称"});
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background: linear-gradient(135deg, #f3f4f6, #ffffff);
}

.card {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-right: 15px;
}

.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-pagination {
  font-size: 14px;
}

.el-pagination .el-pager li:not(.disabled):hover {
  background-color: #409eff;
  color: #fff;
}

.el-pagination .el-pager li.active {
  background-color: #409eff;
  color: #fff;
}
</style>
